<template>
  <div class="index">
    <div class="wrap index-wrap">
      <div class="main">
        <ul class="main-title">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>发布话题</el-breadcrumb-item>
          </el-breadcrumb>
        </ul>
        <div class="wraning"></div>
        <div class="titleInput boxborder">
          <el-input placeholder="请输入标题 用问号结尾" v-model="inputTitle" clearable></el-input>
        </div>
        <div class="selectCls-wrap boxborder">
          <span class="checkClass">选择:</span>
          <el-select v-model="classesVal" placeholder="请选择板块">
            <el-option
              v-for="item in classes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <h4 class="classNotify" v-if="classesVal==3">提问时，请遵循'提问的智慧'中提及的要点。</h4>
          <h4 class="classNotify" v-if="classesVal==1">为避免被管理员删帖！请妥善发言</h4>
        </div>

        <div class="md-wrap">
          <edit @mdContent="mdContent" :inputContent="editContent"></edit>
        </div>
        <div class="sendBlogBtn-wrap">
          <el-button @click="sendBlog">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import edit from "../components/mkEdit";
import { mapGetters } from "vuex";
// import { getUserL } from "../common/mixin";
export default {
  data() {
    return {
      classes: [
        {
          value: "1",
          label: "分享"
        },
        {
          value: "3",
          label: "问答"
        },
        {
          value: "4",
          label: "测试"
        }
      ],
      classesVal: "", //板块
      inputTitle: "", //标题
      inputContent: "", //内容
      wraningFlag: false,
      showConfirmFlag: true,
      editContent: ""
    };
  },
  created() {
    if (this.$route.params.tid) {
      this.getEdit();
    }
  },
  mounted() {
    window.onbeforeunload = function(e) {
      e = e || window.event;
      // 兼容IE8和Firefox 4之前的版本
      if (e) {
        e.returnValue = "关闭提示";
      }
      // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
      return "关闭提示";
    };
  },
  destroyed() {
    window.onbeforeunload = null;
  },
  beforeRouteLeave(to, from, next) {
    to.meta.keepAlive = false; //发表文章后回首页  首页不需要缓存
    if (
      this.showConfirmFlag &&
      (this.inputTitle !== "" || this.inputContent !== "")
    ) {
      this.$confirm("当前页面数据未保存，确定要离开？？", "提醒", {
        cancelButtonText: "留下",
        confirmButtonText: "确认离开",
        type: "warning",
        center: true
      })
        .then(res => {
          if (res) {
            next();
          }
        })
        .catch(res => {});
    } else {
      next();
    }
  },
  methods: {
    // 发帖
    sendBlog() {
      if (!this.user.UID) {
        this.$message.warning("登录后才能发帖哦!");
        this.$router.push("/login");
        return;
      }
      if (!this.classesVal) {
        return this.$alert("请选择一个板块", "提醒", {
          confirmButtonText: "好的"
        });
      }
      if (
        (this.classesVal && !this.inputTitle) ||
        (this.classesVal && !this.inputContent)
      ) {
        return this.$notify({
          title: "标题或者内容忘记写了",
          message: "随便说点什么吧！",
          position: "top-right",
          type: "warning",
          left: 200
        });
      }
      if (
        this.classesVal &&
        this.inputTitle &&
        this.inputContent &&
        this.$route.params.tid == null
      ) {
        const res = this.$http
          .post("blog/new", {
            tsid: this.classesVal, //板块
            tuid: this.user.UID, //用户id
            ttopic: this.inputTitle,
            tcontent: this.inputContent,
            uname: this.user.UName
          })
          .then(res => {
            if (res.errno == 0 && res.code == 0) {
              this.$message.success("发送成功");
              this.classesVal = this.inputContent = this.inputContent = "";
              this.showConfirmFlag = false;
              this.$router.push({ name: "index" }).catch(res => {
                console.log(res);
              });
              this.showConfirmFlag = true;
            } else {
              this.$message.warning("发帖失败！请稍后重试");
            }
          });
      } else {
        this.$http
          .post("blog/updateart", {
            ttopic: this.inputTitle,
            tcontent: this.inputContent,
            tid: this.$route.params.tid,
            uid: this.user.UID
          })
          .then(res => {
            if (res.errno !== 0) return this.$message.warning("数据异常！");
            this.$message.success("恭喜你！修改成功");
            this.inputTitle = "";
            this.inputContent = "";
            this.$router.push({ name: "usercenter" });
          });
      }
    },
    mdContent(content) {
      this.inputContent = content;
    },
    async getEdit() {
      const res = await this.$http.post("blog/editart", {
        tid: this.$route.params.tid
      });
      if (res.errno == 0) {
        this.inputTitle = res.data.TTopic;
        this.editContent = res.data.TContent;
      }
    }
  },
  computed: {
    ...mapGetters({
      user: "getUser"
    })
  },
  components: {
    edit
  }
};
</script>

<style lang='scss' >
@media screen and(max-width: 800px) {
  .right-side {
    display: none;
  }
  .wrap {
    width: 100%;
  }
}
@media screen and(max-width: 500px) {
  .el-message-box {
    width: 180px;
  }
  .wrap {
    margin-top: 60px !important;
    width: 100%;
    .main {
      padding-bottom: 0 !important;
      margin-top: 0px !important;
      .main-title {
        display: none !important;
        .el-input el-input--suffix {
          width: 50px;
        }
      }
      .checkClass {
        display: none !important;
      }
      .ql-editor {
        background-color: white;
      }
      h4 {
        font-size: 9px !important;
        font-weight: normal;
      }

      .sendBlogBtn-wrap {
        margin-top: 103px;
      }
    }
  }
}
.index {
  background: #e9ecef;
  .index-wrap {
    display: flex;
    .main {
      margin-top: 60px;
      position: relative;
      flex: 1;
      min-height: 200px;
      margin-right: 15px;
      box-sizing: border-box;
      padding-bottom: 45px;
      align-self: flex-start;
      background: #e9ecef;
      .main-title {
        display: flex;
        align-items: center;
        height: 40px;
        padding: 10px;
        line-height: 40px;
        box-sizing: border-box;
        span .is-link {
          color: #b1cc41;
          font-size: 14px;
        }
      }
      .selectCls-wrap {
        padding: 10px;
        font-size: 14px;

        display: flex;
        .classNotify {
          align-self: center;
          margin-left: 10px;
        }
        span {
          align-self: flex-end;
        }
        .el-input__inner {
          height: 30px;
          width: 150px;
        }
      }
      .titleInput {
        padding: 10px;
        padding-top: 15px;
        height: 50px;
        font-size: 16px;
        .el-input__inner {
          height: 35px;
          box-shadow: 0 0 1px rgba($color: #00965e, $alpha: 0.8);
          font-size: 16px;
          color: #495057;
        }
      }
      .md-wrap {
        padding: 10px;
        padding-top: 0;
        margin-bottom: 35px;
        max-width: 1226px;
      }
      .ql-editor {
        background: white;
      }
      .ql-toolbar {
        background: white;
      }
      .ql-blank {
        background: white;
      }
      .sendBlogBtn-wrap {
        padding: 10px;
        // #08c
        .el-button {
          background-color: #08c;
          color: white;
        }
      }
    }
  }
  .right-side {
    width: 290px;
    .main-title {
      background-color: #eeeeee;
      padding: 10px;
      border-radius: 3px 3px 0 0;
      box-sizing: border-box;
      font-size: 16px;
    }
    .Rside {
      margin-bottom: 15px;
      background-color: white;
      width: 100%;
      border-radius: 5px;
      padding: 10px;
      box-sizing: border-box;
      padding: 10px;
    }
    .user-info {
      .right-user {
        box-sizing: border-box;
        padding: 10px;
        .userInfo {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .img {
            margin-right: 10px;
            width: 48px;
            height: 48px;
            background-color: violet;
          }
        }
        .score {
          margin: 15px 0 5px 0;
        }
      }
    }
    .sendBtn-wrap {
      width: 100%;
      display: flex;
      box-sizing: border-box;
      padding: 10px;
      background-color: white;
      margin-bottom: 15px;
      .btn {
        text-align: center;
        line-height: 34px;
        font-size: 14px;
        color: white;
        width: 80px;
        height: 34px;
        background-color: yellowgreen;
      }
    }
    .advisement {
      .advert {
        width: 270px;
        height: 65px;
        background: violet;
        margin-bottom: 10px;
      }
    }
    .talkClass {
      width: 100%;
      ul {
        border-radius: 0;
        font-size: 12px;
        white-space: nowrap;
        li {
          margin: 10px 3px;
        }
      }
    }
  }
}
</style>